<template>
  <div>
    <h1>布局</h1>
    <!-- 1.动画 
          a.布局  一个button标签，点击显示隐藏div  show属性
          b.添加动画处加transition标签，通过修改name属性即可实现不同的动画效果
    -->
    <!-- <el-button @click="show = !show">Click Me</el-button>
    <transition name="el-zoom-in-top">
      <div class="red" v-if="show"></div>
    </transition>-->

    <!-- 2.布局 layout布局（栅格系统，一行24份）
        el-row:行
        el-col:列
        ：span='几份'
    -->
    <!-- <el-row>
      <el-col :span="6"><div class="blue">我是内容</div></el-col>
      <el-col :span="6" :offset="6"><div class="teal">我是内容</div></el-col>
    </el-row>-->
    <el-container>
      <el-header class="teal">Header</el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 导航 -->
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
              </template>
              <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <el-row>
            <el-col :span="2">
              <!--4.图标  -->
              <i class="el-icon-delete"></i>
              <i class="el-icon-s-promotion"></i>
              <i class="el-icon-s-platform"></i>
            </el-col>

            <el-col :span="20" :offset="2">
              <!-- 5按钮
                   plain:朴素，移入有效果
                   type:设置按钮类型  primary：主要  success：成功  info：信息 warning:警告  danger危险
                   round：圆角
                   circle：圆
                   disabled
              -->
              <el-button plain>按钮</el-button>
              <el-button type="success" round>按钮</el-button>
              <el-button type="danger" circle>删除</el-button>
              <el-button type="danger" circle disabled>删除</el-button>


                <el-button icon="el-icon-search" circle></el-button>
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                <el-button type="success" icon="el-icon-check" circle></el-button>
                <el-button type="info" icon="el-icon-message" circle></el-button>
                <el-button type="warning" icon="el-icon-star-off" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle></el-button>

            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

<style scoped>
.red {
  width: 200px;
  height: 200px;
  background: red;
}
.blue {
  background: blue;
  height: 40px;
}
.teal {
  background: teal;
  height: 40px;
}
.el-aside {
  height: 500px;
  background: pink;
}
</style>